.message-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none; // pointer-events:none 不响应鼠标事件
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  &-top {
    position: absolute;
    top: 20px;
  }

  &-bottom {
    position: absolute;
    bottom: 20px;
  }
}

.message-item {
  margin-bottom: 12px;
  padding: 10px 16px;
  line-height: 14px;
  font-size: 14px;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px #ccc;
  pointer-events: all; // wrapper 不响应鼠标事件，但是 message 还是要响应的，加上 pointer-event:all
}


.message-enter {
  opacity: 0;
  transform: scale(1.1);
}

.message-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity,transform 1s ease;
}

.message-exit {
  opacity: 1;
}

.message-exit-active {
  opacity: 0;
  transition: opacity 1s ease;
}
